<template>
  <div class="container with-nav-padding">
    <div class="profile-panel">
      <div class="profile-cell with-grey-bottom-border">
        <div class="header">头像</div>
        <label for="avatarUpload" class="avatar">
          <img :src="profileDetail.avatar" alt="" />
        </label>
      </div>
      <!-- <div class="profile-cell with-grey-bottom-border">
        <div class="header">个人主页背景</div>
        <label for="bgUpload" class="bg">
          <img :src="profileDetail.background" alt="" />
        </label>
      </div> -->
      <div class="profile-cell with-grey-bottom-border">
        <div class="header">昵称</div>
        <input
          v-model="profileDetail.nickname"
          placeholder="请输入"
          type="text"
        />
      </div>
      <div class="profile-cell with-grey-bottom-border">
        <div class="header">性别</div>
        <div @click="showSexChoose = true" class="right-btn">
          {{
            profileDetail.sex === 0
              ? "请选择"
              : profileDetail.sex === 1
              ? "男"
              : "女"
          }}
        </div>
      </div>
      <div class="profile-cell with-grey-bottom-border">
        <div class="header">手机号</div>
        <div class="tel">
          {{ profileDetail.mobile }} <span class="vertify">已验证</span>
        </div>
      </div>
      <div
        @click="showAddrSelect = true"
        class="profile-cell with-grey-bottom-border"
      >
        <div class="header">区域</div>
        <div class="right-btn">
          {{ profileDetail.district ? profileDetail.district : "请选择" }}
        </div>
      </div>
      <div class="profile-cell with-grey-bottom-border">
        <div class="header">地址</div>
        <input
          v-model="profileDetail.address"
          placeholder="请填写详细地址"
          type="text"
        />
      </div>
      <div class="profile-cell with-grey-bottom-border">
        <div class="header">个性签名</div>
        <textarea
          v-model="profileDetail.signature"
          placeholder="请填写个人签名"
          name=""
          id=""
        ></textarea>
      </div>
    </div>
    <input
      id="bgUpload"
      ref="upload"
      name="bgUpload"
      type="file"
      style="position:absolute; clip:rect(0 0 0 0);"
      @change="uploadBg"
       accept="image/*"
    />
    <input
      id="avatarUpload"
      ref="avatarUpload"
      name="avatarUpload"
      type="file"
       accept="image/*"
      style="position:absolute; clip:rect(0 0 0 0);"
      @change="uploadAvatar"
    />
    <yd-cityselect v-model="showAddrSelect" :callback="result" :items="district"
      >{{ profileDetail.district }}
    </yd-cityselect>
    <sex-choose
      @sexChoose="sexChoose"
      v-if="showSexChoose"
      @panelClose="showSexChoose = false"
    ></sex-choose>
    <button
      @click="save"
      class="save"
      :class="{ 'fullscreen-bottom-style': isFullscreen }"
      :style="{background: mainColor}"
    >
      保存
    </button>
  </div>
</template>

<script>
import { getProfileDetail, profileEdit } from "@/api/profile";
import sexChoose from "./component/sex-choose.vue";
import District from "@/utils/citys.js";
import { fileUpload } from "@/api/file";
import { mapState } from "vuex";
export default {
  data() {
    return {
      showSexChoose: false,
      showAddrSelect: false,
      profileDetail: {},
      district: District
    };
  },
  computed: {
    ...mapState({
      isFullscreen: state => state.app.isFullscreen,
      mainColor: state => state.app.mainColor
    })
  },
  methods: {
    result(ret) {
      this.profileDetail.district =
        ret.itemName1 + " " + ret.itemName2 + " " + ret.itemName3;
    },
    save() {
      profileEdit(this.profileDetail).then(res => {
        if (res.status === 200) {
          this.$dialog.toast({
            mes: "修改成功",
            timeout: 1500,
            icon: "success"
          });
          this.$router.go(-1);
        }
      });
    },
    uploadBg() {
      alert(this.$refs.upload.files[0]);
      let formData = new FormData();
      formData.append("file", this.$refs.upload.files[0]);

      fileUpload(formData).then(res => {
        if (res.status === 200) {
          this.profileDetail.background = res.data.data.file;
        }
      });
    },
    uploadAvatar() {
      let formData = new FormData();
      formData.append("file", this.$refs.avatarUpload.files[0]);
      fileUpload(formData).then(res => {
        if (res.status === 200) {
          this.profileDetail.avatar = res.data.data.file;
        }
      });
    },
    sexChoose(id) {
      this.profileDetail.sex = id;
    }
  },
  created() {
    getProfileDetail().then(res => {
      if (res.status === 200) {
        this.profileDetail = res.data.data;
      }
    });
  },
  components: {
    sexChoose
  }
};
</script>

<style lang="less" scoped>
.container {
  .profile-panel {
    background: #fff;

    textarea {
      padding: 0.5rem 3.2%;
      height: 3rem;
      width: 70%;
      border: none;
      font-size: 0.56rem;
      margin-bottom: 0.48rem;
    }
  }

  .profile-cell {
    min-height: 2rem;
    line-height: 2rem;
    display: flex;
    justify-content: space-between;
    color: #444444;
    font-size: 0.64rem;
    padding: 0 3.2%;
    background: #fff;

    .avatar {
      display: block;
      width: 1.6rem;
      height: 1.6rem;
      border-radius: 50%;
      background-color: #dfdfdf;
      margin-top: 0.2rem;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .bg {
      display: block;
      width: 1.6rem;
      height: 1.6rem;
      background-color: #dfdfdf;
      margin-top: 0.2rem;
      overflow: hidden;
      img {
        height: 100%;
      }
    }

    input {
      height: 2rem;
      border: none;
      background: none;
      width: 75%;
      text-align: right;
      font-size: 0.56rem;
    }

    .text {
      font-size: 0.56rem;
      color: #999999;
    }

    .tel {
      font-size: 0.56rem;
      font-weight: bold;

      .vertify {
        color: rgba(248, 88, 89, 1);
      }
    }

    .right-btn {
      font-size: 0.56rem;
      color: #999999;
      padding-right: 0.8rem;
      background-image: url("../../assets/发视频-assets/next.png");
      background-size: 0.28rem 0.52rem;
      background-repeat: no-repeat;
      background-position: 100% 50%;
    }

    .default-btn {
      margin-top: 0.5rem;
      width: 1.76rem;
      height: 0.96rem;
      background-image: url("../../assets/编辑收货地址-assets/开关.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }

  .save {
    position: fixed;
    width: 100%;
    z-index: 1;
    color: #fff;
    font-size: 0.64rem;
    font-weight: bold;
    border: none;
    line-height: 2rem;
    background: rgba(0, 120, 255, 1);
    left: 0;
    bottom: 0;
  }
}
</style>
